<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入图表文件 -->
     <script src="./js/echarts.js"></script>

     <style>
        
        #main{
            max-width: 500px;
            height: 300px;
            border: 1px solid;
        }
     </style>
  
</head>
<body>
      <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main"></div>
  <script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    let options = {

    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        color: [
    '#c23531',
    '#2f4554',
    '#61a0a8',
    '#d48265',
    '#91c7ae',
    '#749f83',
    '#ca8622',
    '#bda29a',
    '#6e7074',
    '#546570',
    '#c4ccd3'
  ],
      title: {
        text: '入门示例'
      },
      tooltip: {},
      //设置实例
      legend: {
        data: ['售价','销量']
      },
      xAxis: {
        axisLine: {
      symbol: 'arrow',
      lineStyle: {
        type: 'dashed'
        // ...
      }
    },
        data: ['帽子', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
    //   配置图表及数据
      series: [
        {
          name: '售价',
        //   当前图形的形式 是柱状图
          type: 'bar',
          // 图表中显示的数据
          data: [5, 20, 36, 10, 10, 20]
        },
        {
          name: '销量',
        //   当前图形的形式 是柱状图
          type: 'line',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
      // 监听屏幕尺寸变化
      window.addEventListener('resize',function(e){
        //   设置图表大小随着屏幕变化  改变图表大小
        myChart.resize()
            
        })
  </script>
</body>
</html>